var ProcedureTemplForm = function () {
  var template = /* html */ `
    <div class="procedure-templ-form" v-loading.fullscreen.lock="loading">
      <template v-if="workshopProcessList!==null">
        <div class="templ-form-item">
          <span style="margin-right:15px">模板名称</span>
          <el-input v-if="type==='add'" style="width:300px" size="medium" v-model="templName"></el-input>
          <span v-else>{{templName}}</span>
        </div>
        <div class="templ-form-item">
          <span>设置工序</span>
        </div>
        <div class="templ-form-search">
          <el-input size="small" v-model="searchValue" placeholder="查询条件" @keyup.native.enter="toFilterTree">
            <el-button slot="append" icon="el-icon-search" @click="toFilterTree"></el-button>
          </el-input>
        </div>
        <div class="templ-form-tree">
          <el-tree show-checkbox :data="workshopProcessList" empty-text="暂无可选择的工序" :props="procedureProps" node-key="id"
            :filter-node-method="filterNode" ref="procedureTree"></el-tree>
        </div>
        <div class="templ-form-btns">
          <el-button type="primary" size="small" @click="ensure">确定</el-button>
        </div>
      </template>
    </div>
  `;

  return {
    props: {
      order: {
        type: Object,
        default: function () {
          return null;
        }
      },
      type: {
        type: String,
        default: 'add'
      },
      dropdownOption: {
        type: Object,
        default: function () {
          return {};
        }
      }
    },

    data: function () {
      return {
        loading: false,
        templName: '',
        workshopProcessList: null,
        searchValue: '',
        procedureProps: {
          label: 'name',
          children: 'processList'
        }
      };
    },

    created: function () {
      if (this.type === 'add') {
        this.setAllProcessList();
      } else {
        this.templName = this.order.name;
        this.setAddProcessList();
      }
    },

    methods: {
      setAllProcessList: function () {
        var dropdownOption = this.dropdownOption;
        var workshopProcessList = dropdownOption.workshopProcessList;
        if (workshopProcessList !== undefined) {
          this.workshopProcessList = workshopProcessList;
          return;
        }

        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/getAllWorkShopAndProcedure', {
          type: 0
        }).then(function (workshopProcessList) {
          workshopProcessList = self.getProcessTreeData(workshopProcessList);
          dropdownOption.workshopProcessList = workshopProcessList;
          self.workshopProcessList = workshopProcessList;

          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      setAddProcessList: function () {
        var id = this.order.id;
        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/getAllWorkShopAndProcedure', {
          type: 3,
          tempId: id
        }).then(function (workshopProcessList) {
          workshopProcessList = self.getProcessTreeData(workshopProcessList);
          self.workshopProcessList = workshopProcessList;
          self.loading = false;
        }).catch(function () {
          self.loading = false;
        });
      },

      getProcessTreeData: function (workshopProcessList) {
        var workshopProcesses = [];
        for (var i = 0; i < workshopProcessList.length; i++) {
          var workshopProcess = workshopProcessList[i];

          var workshopId = workshopProcess.id;
          var processList = workshopProcess.processList;
          processList = _.map(processList, function (processObj) {
            return {
              id: processObj.id,
              name: processObj.processName,
              workshopId: workshopId
            };
          });

          workshopProcesses.push({
            id: `workshop_${workshopId}`,
            name: workshopProcess.workshopName,
            processList: processList
          });
        }
        return workshopProcesses;
      },

      filterNode: function (value, data) {
        var processList = data.processList;
        if (processList !== undefined) {
          return false;
        }

        if (value === '') {
          return true;
        }

        var name = data.name;
        return name.indexOf(value) !== -1;
      },

      toFilterTree: function () {
        var searchValue = this.searchValue;
        this.$refs['procedureTree'].filter(searchValue);
      },

      ensure: function () {
        var templName = this.templName;
        if (templName === '') {
          this.$alert('请输入模板名称', '信息');
          return;
        }

        var processList = this.$refs['procedureTree'].getCheckedNodes(true);
        if (processList.length === 0) {
          this.$alert('请选择要设置的工序', '信息');
          return;
        }

        if (this.type === 'add') {
          this.addTempl(processList);
        } else {
          this.updateTempl(processList);
        }
      },

      addTempl: function (processList) {
        processList = _.map(processList, function (processObj, index) {
          return {
            workshopName: processObj.workshopId,
            processName: processObj.id,
            sort: index + 1
          };
        });

        this.loading = true;
        var self = this;
        ajaxRequest('orderProcedureTemplate/addTemplate', {
          name: this.templName,
          type: 'create',
          procedureArray: JSON.stringify(processList)
        }).then(function (msg) {
          self.loading = false;
          self.$alert('模板添加成功', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      },

      updateTempl: function (processList) {
        processList = _.map(processList, function (processObj) {
          return {
            workshopName: processObj.workshopId,
            processName: processObj.id,
            sort: 0
          };
        });


        this.loading = true;
        var self = this;
        var order = this.order;
        ajaxRequest('orderProcedureTemplate/addTemplate', {
          tempId:order.id,
          type:'add',
          procedureArray:JSON.stringify(processList)
        }).then(function (msg) {
          self.loading = false;
          self.$alert('该模板的工序添加成功', '信息', {
            callback: function () {
              self.$emit('save-success');
            }
          });
        }).catch(function () {
          self.loading = false;
        });
      }
    },

    template: template
  };
}();
